<template>
  <div class="apply">
    <div class="mask" v-show="show" @click="closure"></div>
    <div class="apply_nav" :style="{ left: show ? '0px' : '-100%' }">
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="#E2EBF5"
        text-color="#003963"
        active-text-color="#FFFFFF"
      >
        <template v-for="item in listNav" :key="item.id">
          <el-sub-menu :index="item.id" v-if="item.child.length !== 0">
            <template #title>
              <span class="text">{{ item.name }}</span>
            </template>
            <el-menu-item-group v-for="child in item.child" :key="child.id">
              <el-menu-item :index="child.id"
                ><span class="text">● {{ child.name }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item :index="item.id" v-else>
            <template #title>
              <span class="text">{{ item.name }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
      <div class="but">
        <el-button type="primary">预览报名表</el-button>
        <el-button type="primary">提交报名表</el-button>
      </div>
    </div>
    <div class="main">
      <div class="title">{{ titleList[active] }}</div>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navigation", //导航
  data() {
    return {
      show: this.$store.state.show,
      screenWidth: document.body.clientWidth,
      active: "1",
      listNav: [
        { name: "报名指南", id: "1", child: [] },
        { name: "个人信息", id: "2", child: [] },
        {
          name: "工作背景",
          id: "3",
          child: [
            { name: "目前工作", id: "3-1" },
            { name: "工作履历", id: "3-2" },
          ],
        },
        {
          name: "教育背景",
          id: "4",
          child: [
            { name: "学位教育", id: "4-1" },
            { name: "证书", id: "4-2" },
          ],
        },
        { name: "笔试", id: "5", child: [] },
        { name: "社团活动", id: "6", child: [] },
        { name: "荣誉及奖励", id: "7", child: [] },
        { name: "申请人自述", id: "8", child: [] },
        { name: "推荐人信息", id: "9", child: [] },
        { name: "材料上传", id: "10", child: [] },
        { name: "奖学金申请", id: "11", child: [] },
        { name: "其他信息", id: "12", child: [] },
      ],
      titleList: {
        1: "欢迎申请中欧FMBA",
        2: "个人信息",
        "3-1": "工作背景-目前工作",
        "3-2": "工作背景-工作履历",
        "4-1": "教育背景-学位教育",
        "4-2": "教育背景-证书",
        5: "笔试方式",
        6: "社团活动",
        7: "荣誉及奖励",
        8: "申请人自述",
        9: "邀请推荐人",
        10: "材料上传",
        11: "欢迎申请2022级FMBA新生奖学金",
        12: "其它信息",
      },
    };
  },
  computed: {
    getshow() {
      return this.$store.state.show;
    },
  },
  watch: {
    // 监听路由导航
    $route(to) {
      this.active = to.query.id;
    },
    // 监听侧边导航是否显示
    getshow(to) {
      this.show = to;
    },
    // 监听窗口宽度
    screenWidth(val) {
      if (val > 746) {
        this.$store.commit("getShow", false);
      }
      this.screenWidth = val;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.active = this.$route.query.id;
    }
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth;
      })();
    };
  },
  methods: {
    closure() {
      this.show = !this.show;
      this.$store.commit("getShow", this.show);
    },
    handleSelect(key) {
      this.title = this.titleList[key];
      let path = "/enroll/guide";
      switch (key) {
        case "1":
          path = "/enroll/guide";
          break;
        case "2":
          path = "/enroll/pinformation";
          break;
        case "3-1":
          path = "/enroll/work";
          break;
        case "3-2":
          path = "/enroll/resume";
          break;
        case "4-1":
          path = "/enroll/education";
          break;
        case "4-2":
          path = "/enroll/certificate";
          break;
        case "5":
          path = "/enroll/examination";
          break;
        case "6":
          path = "/enroll/activity";
          break;
        case "7":
          path = "/enroll/award";
          break;
        case "8":
          path = "/enroll/readme";
          break;
        case "9":
          path = "/enroll/rinformation";
          break;
        case "10":
          path = "/enroll/material";
          break;
        case "11":
          path = "/enroll/scholarship";
          break;
        case "12":
          path = "/enroll/other";
          break;
      }
      this.$store.commit("getShow", false);
      this.$router.push({
        path,
        query: { id: key },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.apply {
  width: 1000px;
  margin: 39px auto 0;
  display: flex;
  .apply_nav {
    overflow: hidden;
    width: 230px;
    height: 1050px;
    background: #e2ebf5;
    padding-top: 20px;
    .text {
      font-size: 20px;
      font-family: HYQiHei;
      font-weight: normal;
    }
    ::v-deep .el-menu-item.is-active {
      background: #003963;
    }
    ::v-deep .el-menu-item {
      height: 50px;
    }
    ::v-deep .el-sub-menu__title {
      height: 50px;
    }
    ::v-deep .el-sub-menu .el-sub-menu__icon-arrow {
      font-size: 20px;
    }
    .but {
      margin-top: 30px;
      text-align: center;
      ::v-deep .el-button {
        width: 170px;
        height: 45px;
        margin-bottom: 15px;
        margin-left: 0;
      }
    }
  }
  .mask {
    z-index: 9;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.4);
  }
  .main {
    overflow: hidden;
    width: 770px;
    position: relative;
    .title {
      height: 80px;
      line-height: 80px;
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #003963;
      padding-left: 49px;
    }
    .content {
      padding: 31px 45px;
      margin-bottom: 120px;
      background: #ffffff;
    }
  }
}
@media (max-width: 768px) {
  .apply {
    position: relative;
    margin-top: 30px;
    width: 100%;
    display: block;
    .apply_nav {
      overflow-y: auto;
      z-index: 100;
      height: 100%;
      position: fixed;
      top: 0;
      left: -100%;
      padding-top: 20px;
      width: 160px;
      transition: 0.6s;
      .text {
        font-size: 14px;
        font-family: HYQiHei;
        font-weight: normal;
      }
      ::v-deep .el-menu-item.is-active {
        background: #003963;
      }
      ::v-deep .el-menu-item {
        height: 40px;
      }
      ::v-deep .el-sub-menu__title {
        height: 40px;
      }
      .but {
        margin-top: 20px;
        text-align: center;
        margin-bottom: 50px;
        ::v-deep .el-button {
          width: 120px;
          height: 35px;
          font-size: 16px;
        }
      }
    }
    .main {
      width: 100%;
      .title {
        height: 45px;
        line-height: 45px;
        font-size: 20px;
        padding-left: 21px;
      }
      .content {
        padding: 11px 11px;
        background: #ffffff;
      }
    }
  }
}
</style>
